<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>官网rem适配</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"">
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		body{
			width: 100%;
			height: 100%;
			background-color: #ededf7;
			color:#fff;
			font-size: 0.2rem;
			text-align: center;
		}
		#header{
			width: 100%;
			height: 0.96rem;
			background-color: #393939;		
			line-height: 0.96rem;
		}
		#banner{
			height: 3.04rem;
			line-height: 3.04rem;
			width: 100%;
			background-color: #e2e2e2;
		}
		#section{
			width: 100%;
			height: 10rem;
			background-color: #fafafa;
			margin-top: 0.2rem;
		}

	</style>
</head>
<body>
	<div id="header">
		header
	</div>
	<div id="banner">
		banner
	</div>
	<div id="section" class="section1">
		section_1
	</div>
	<!-- <div id="section" class="section2">
		section_2
	</div>
	<div id="section" class="section3">
		section_3
	</div> -->
	
</body>
<script type="text/javascript">


     ~function (d, w) {
        var docEl = d.documentElement,resizeEvt = 'orientationchange' in w ? 'orientationchange' : 'resize',
        recalc = function () {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
        };
        if (!d.addEventListener) return;
        w.addEventListener(resizeEvt, recalc, false);
        d.addEventListener('DOMContentLoaded', recalc, false);
    }(document, window);
   </script>
</html>